<template>
    <el-menu
            :collapse="flag"
            default-active="2"
            class="el-menu-vertical-demo"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
            :router='true'
    >
        <MenuItem :menuData='menuData'/>
    </el-menu>
</template>

<script>
    import {onMounted, reactive, toRefs} from 'vue'
    import MenuItem from './MenuItem'
	export default {
		name: 'Menu',
        props:['flag', 'menuData'],
        setup(props){
            const state = reactive({
              ...toRefs(props)
            })
			onMounted(() => {
				console.log(state.menuData)
            })
          return {
            ...toRefs(state)
          }
        },
        components: {
            MenuItem
        }
	}
</script>

<style scoped>

</style>
